/* Card Base Style */
    .stat-card {
      position: relative;
      overflow: hidden;
      border: 1px solid #F27E00;
      /* Tailwind's border-gray-200 */
      border-radius: 1rem;
      /* rounded-xl */
      padding: 1.5rem;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      cursor: default;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp 1s ease forwards;
      transition: color 0.4s ease;
      z-index: 1;
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      transform: translateX(-100%);
      background: #F27E00;
      transition: transform 0.4s ease;
      z-index: 0;
    }

    .stat-card:hover::before {
      transform: translateX(0);
    }

    .stat-card:hover .stat-number,
    .stat-card:hover .stat-label {
      color: white;
      position: relative;
      z-index: 1;
    }

    .stat-number {
      font-size: 1.875rem;
      /* text-3xl */
      font-weight: 700;
      color: #1f2937;
      /* text-gray-800 */
      transition: color 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .stat-label {
      margin-top: 0.25rem;
      color: #6b7280;
      /* text-gray-500 */
      transition: color 0.3s ease;
      position: relative;
      z-index: 1;
    }

    /* Entry Animation Directions */
    .animate-slide-left {
      animation-name: slideInLeft;
    }

    .animate-slide-right {
      animation-name: slideInRight;
    }

    @keyframes slideInLeft {
      0% {
        opacity: 0;
        transform: translateX(-50px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInRight {
      0% {
        opacity: 0;
        transform: translateX(50px);
      }

      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }